<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>后台管理系统 - 电商助农平台</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      display: flex;
      min-height: 100vh;
    }
    .sidebar {
      width: 260px;
      background: #2c3e50;
      color: white;
      padding: 1.5rem;
    }
    .nav-link {
      color: white;
      padding: 0.75rem 1rem;
      border-radius: 0.25rem;
      margin-bottom: 0.5rem;
    }
    .nav-link:hover, .nav-link.active {
      background: rgba(255, 255, 255, 0.1);
    }
    .content {
      flex: 1;
      background: #f8f9fa;
      padding: 1.5rem;
    }
    .stats-icon {
      font-size: 2.5rem;
      opacity: 0.8;
    }
    .value-display {
      font-size: 2rem;
      font-weight: 700;
      margin: 1rem 0;
    }
    .card-title {
      border-bottom: 2px solid var(--primary-color);
      padding-bottom: 0.8rem;
      margin-bottom: 1.5rem;
    }
    .order-status {
      font-size: 0.9rem;
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
    }
    .btn-more {
      border: 1px solid var(--primary-color);
      color: var(--primary-color);
      transition: all 0.3s;
    }
    .btn-more:hover {
      background: var(--primary-color);
      color: white;
    }
    .table-hover tbody tr:hover {
      background-color: rgba(25,135,84,0.05);
    }
    .progress-track {
      height: 8px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
<div class="sidebar">
  <div class="navbar-brand-box d-flex align-items-center">
    <div>
      <h3 class="text-white mb-0">🌱 农业互联</h3>
      <small class="text-white-50 opacity-75">v2.1.0</small>
    </div>
  </div>

  <nav class="mt-4">
    <div class="nav flex-column">
      <a class="nav-link" href="home.jsp">
        <i class="fas fa-home me-2"></i>
        <span>平台首页</span>
      </a>
      <a class="nav-link active" href="products.jsp">
        <i class="fas fa-seedling me-2"></i>
        <span>农产品管理</span>
      </a>
      <a class="nav-link" href="#">
        <i class="fas fa-chart-line me-2"></i>
        <span>数据统计</span>
      </a>
      <div class="mt-4 mx-3 border-top pt-3">
        <a class="nav-link text-warning" href="logout.jsp">
          <i class="fas fa-sign-out-alt me-2"></i>
          <span>退出系统</span>
        </a>
      </div>
    </div>
  </nav>
</div>

<div class="content">
  <div class="container-fluid">
    <div class="page-header">
<%--      <i class="fas fa-leaf text-muted"></i>--%>
<%--      <h4>电商助农</h4>--%>
    </div>
    <!-- 统计概览 -->
    <div class="row g-4 mb-4">
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-start border-4 border-success">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <div>
                <h5 class="text-muted">今日成交额</h5>
                <div class="value-display text-success">¥28,450</div>
              </div>
              <i class="fas fa-wallet stats-icon text-success"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-start border-4 border-warning">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <div>
                <h5 class="text-muted">待处理订单</h5>
                <div class="value-display text-warning">24</div>
              </div>
              <i class="fas fa-clipboard-list stats-icon text-warning"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-start border-4 border-info">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <div>
                <h5 class="text-muted">新增用户</h5>
                <div class="value-display text-info">156</div>
              </div>
              <i class="fas fa-users stats-icon text-info"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-start border-4 border-danger">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <div>
                <h5 class="text-muted">待审核商品</h5>
                <div class="value-display text-danger">12</div>
              </div>
              <i class="fas fa-box-open stats-icon text-danger"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据图表 -->
    <div class="row g-4 mb-4">
      <div class="col-12 col-lg-8">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">销售数据趋势</h5>
            <canvas id="salesChart"></canvas>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">商品分类占比</h5>
            <canvas id="categoryChart"></canvas>
          </div>
        </div>
      </div>
    </div>
    <!-- 最新订单 -->
    <div class="row g-4">
      <div class="col-12 col-lg-8">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
              <h5 class="card-title mb-0">最近订单</h5>
              <a href="#" class="btn btn-more btn-sm">查看全部</a>
            </div>

            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                <tr>
                  <th>订单号</th>
                  <th>产品名称</th>
                  <th>金额</th>
                  <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>#20230012</td>
                  <td>有机草莓</td>
                  <td>¥128.00</td>
                  <td><span class="order-status bg-success text-white">已完成</span></td>
                </tr>
                <tr>
                  <td>#20230011</td>
                  <td>五常大米</td>
                  <td>¥268.00</td>
                  <td><span class="order-status bg-warning text-dark">配送中</span></td>
                </tr>
                <tr>
                  <td>#20230010</td>
                  <td>土鸡蛋</td>
                  <td>¥65.00</td>
                  <td><span class="order-status bg-danger text-white">待付款</span></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- 农业监测 -->
      <div class="col-12 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">农业监测看板</h5>
            <div class="mb-4">
              <div class="d-flex align-items-center mb-3">
                <i class="fas fa-thermometer-half text-danger me-3"></i>
                <div>
                  <small class="text-muted">棚内温度</small>
                  <div class="h5 mb-0">26.5°C</div>
                </div>
              </div>
              <div class="d-flex align-items-center mb-3">
                <i class="fas fa-tint text-info me-3"></i>
                <div>
                  <small class="text-muted">土壤湿度</small>
                  <div class="h5 mb-0">62% RH</div>
                </div>
              </div>
              <div class="d-flex align-items-center">
                <i class="fas fa-sun text-warning me-3"></i>
                <div>
                  <small class="text-muted">光照强度</small>
                  <div class="h5 mb-0">4500Lux</div>
                </div>
              </div>
            </div>
            <div class="border-top pt-3">
              <h6>物流追踪</h6>
              <div class="progress progress-track mt-2">
                <div class="progress-bar bg-success" role="progressbar" style="width: 75%"
                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="mt-2 small text-muted">
                <span class="me-3">已出库</span>
                <span class="me-3">运输中</span>
                <span>配送中</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  // 销售折线图
  const salesCtx = document.getElementById('salesChart').getContext('2d');
  new Chart(salesCtx, {
    type: 'line',
    data: {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
      datasets: [{
        label: '销售额',
        data: [6500, 8900, 10200, 12300, 9800, 14500],
        borderColor: '#198754',
        tension: 0.4,
        fill: true,
        backgroundColor: 'rgba(25,135,84,0.1)'
      }]
    }
  });
  // 品类饼图
  const categoryCtx = document.getElementById('categoryChart').getContext('2d');
  new Chart(categoryCtx, {
    type: 'doughnut',
    data: {
      labels: ['新鲜果蔬', '五谷杂粮', '禽畜蛋类', '加工食品'],
      datasets: [{
        data: [35, 28, 20, 17],
        backgroundColor: [
          '#198754',
          '#ffc107',
          '#fd7e14',
          '#0dcaf0'
        ]
      }]
    }
  });
</script>
</body>
</html>

